<h1>RSS ARTICLES - <a href="/internal/articles">Main Articles Dashboard</a></h1>
<form class="lmao">
  <label><input id="cb_published" type="checkbox" name="checkbox" checked> Published </label>
  <label><input id="cb_featured" type="checkbox" name="checkbox" checked> Featured </label>
  <label><input id="cb_admin_allowed" type="checkbox" name="checkbox" checked> Admin publish Allowed </label>
  <label><input id="cb_only_user" type="checkbox" name="checkbox"> Only User may publish </label>
  <label><input id="cb_retrieved_today" type="checkbox" name="checkbox" checked> Retrieved Today</label>
  <input id="submit" type="submit" value="Apply Filter and refresh">
</form>

<% @articles.each do |article| %>
  <% published = article.published ? "published" : "" %>
  <% featured = article.featured ? "featured": "" %>
  <% publish_permission = article.user.feed_admin_publish_permission ? "admin-allowed" : "only-user" %>
  <% other_classes = [published, featured,  publish_permission].join(" ") %>

  <div class="row main-group <%= other_classes %>" data-retrieveddate="<%= article.created_at %>" style="<%= "background:#f2fff2;" if article.user.feed_admin_publish_permission %> <%= "background:#daf7ff;" if article.published %>">
    <b><a href="<%= article.path %>" target="_blank"><%= article.title %></a></b> <a href="<%= article.path %>/edit" target="_blank" style="background:#00da8b;color:white;padding:1px 6px">EDIT</a><br/>
    by <b><a href="<%= article.user.path %>" target="_blank"><%= article.username %></a></b>
    <br/>
    <br/>
    <% article_length = article.body_markdown.length %>
    <% if article_length < 550 %>
      <div style="background:#957546;display:table-row;color:antiquewhite">
        <b> --Possibly Poor Content (only <%= article.body_markdown.length %> characters)-- </b>
      </div>
      <br/>
    <% end %>
    <div class="inner-row col-xs-12">
      <form action="/internal/articles/<%= article.id %>" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input type="hidden" name="_method" value="patch" />
        Featured Number: <input name="article[featured_number]" value="<%= article.featured_number %>" id="featured_number_<%= article.id %>" style="max-width:140px"><button onclick="timeNow(<%= article.id %>);return false;">☝️</button>
        &nbsp Featured: <input name="article[featured]" type="checkbox" <%= "checked" if article.featured %>>
        &nbsp Image BG color: <input name="article[main_image_background_hex_color]" value="<%= article.main_image_background_hex_color %>" id="featured_number_<%= article.id %>"><br/><br/>
        Social Image: <input name="article[social_image]" value="<%= article.social_image %>" id="featured_number_<%= article.id %>">
        &nbsp &nbsp <button class="btn btn-primary">SUBMIT</button>
      </form>
      <% if article.published %>
        <div class="row" style="background:#00b0e3;color:white;">PUBLISHED <%= "<strong>AND FEATURED</strong>".html_safe if article.featured %></div>
      <% elsif article.user.feed_admin_publish_permission %>
        <div class="row" style="background:#5cb85c;color:white;">ADMIN PUBLISH ALLOWED</div>
      <% else %>
        <div class="row" style="background:#e3174a;color:white;">ONLY USER MAY PUBLISH</div>
      <% end %>
    </div>
  </div>
<% end %>

<div class="row" style="font-size:1.4em;text-align:center;">
  <%= paginate @articles %>
</div>
<br/><br/>

<script>
  function timeNow(objectID){
    var seconds = new Date().getTime() / 1000;
    document.getElementById("featured_number_"+objectID).value = Math.round(seconds);
  }

  $('.row').on("submit", "form", function() {
    var form = $(this);
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        // dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function(json){
      console.log("success")
      form.parents(".row").addClass("highlighted-bg")
      form.parents(".row").addClass("highlighted-border")
      setTimeout(function(){
        form.parents(".row").removeClass("highlighted-bg")
      },350)
    });
    return false; // prevents normal behaviour
  });

  function check(id) {
    return document.getElementById(id).checked;
  }

  document.getElementById("submit").onclick = function(e) {
    e.preventDefault();
    var ids = ["cb_published", "cb_featured", "cb_admin_allowed", "cb_only_user"];
    var corres_classes = ["published", "featured", "admin-allowed", "only-user"];
    var all = document.getElementsByClassName("main-group");
    for (var i = 0; i < all.length; i++) {
      all[i].style.display = "";
    }

    for (var i = 0; i < ids.length; i++) {
      if (check(ids[i]) ===  false) {
        var things = document.getElementsByClassName(corres_classes[i])
        for (var x = 0; x < things.length; x++){
          things[x].style.display = "none";
        }
      }
    }

    if(check("cb_retrieved_today") === true) {
      var todayDate = new Date().toDateString();
      for (var i = 0; i < all.length; i++) {
        var dateOfArticle = new Date(all[i].dataset.retrieveddate).toDateString();
        if (todayDate !== dateOfArticle) {
          all[i].style.display = "none";
        }
      }
    }
  }
</script>
